<template>
  <div class="scene" ref="sceneDiv"></div>
</template>
<script setup lang="ts" name="Scene">
import { ref, onMounted, watch, reactive } from "vue";
import * as THREE from "three";
import scene from "@/three/scene";
import camera from "@/three/camera";
import axesHelper from "@/three/axesHelper";
import gui from "@/three/gui";
import renderer from "@/three/renderer";
import controls from "@/three/controls";
import animate from "@/three/animate";
import createMesh from "@/three/createMesh";
import "@/three/init";
import AlarmSprite from "@/three/mesh/alarmSprite";
import LightWall from "@/three/mesh/lightWall";
import Flyline from "@/three/mesh/flyLine";
import LightRander from "@/three/mesh/lightRander";
import eventBus from "@/utils/eventBus";
import gsap from 'gsap';

const props = defineProps(["dataList"]);
const meshList = reactive([]);

let mapFn = {
  火警: (position, index) => {
    const lightWall = new LightWall(1, 2, position);
    lightWall.eventListIndex = index;
    scene.add(lightWall.mesh);
    meshList.push(lightWall);
  },
  治安: (position, index) => {
    const lightWall = new Flyline(position);
    lightWall.eventListIndex = index;
    scene.add(lightWall.mesh);
    meshList.push(lightWall);
  },
  电力: (position, index) => {
    const lightWall = new LightRander(2, position);
    lightWall.eventListIndex = index;
    scene.add(lightWall.mesh);
    meshList.push(lightWall);
  },
};

eventBus.on("handleClick", (data) => {
  meshList.forEach((item) => {
    if (item.eventListIndex === data.index) {
      item.mesh.visible = true;
      const targetPosition = item.mesh.position;
      
      // 保存当前相机位置
      const currentPosition = camera.position.clone();
      
      gsap.to(controls.target, {
        duration: 1,
        x: targetPosition.x,
        y: 0,
        z: targetPosition.z,
        ease: "power2.out",
        onUpdate: () => {
          // 在更新时保持相机位置不变
          camera.position.copy(currentPosition);
          controls.update();
        }
      });
        
    } else {
      item.mesh.visible = false;
    }
  });
});

watch(
  () => props.dataList,

  (val) => {
    meshList.forEach((item) => {
      item.remove();
    });
    val.forEach((item, i) => {
      const position = {
        x: item.position.x / 5 - 10,
        z: item.position.y / 5 - 10,
      };
      const alarmSPrite = new AlarmSprite(item.name, position);
      alarmSPrite.onClick(() => {
        eventBus.emit("alarmClick", { name: item.name, index: i });
      });
      alarmSPrite.eventListIndex = i;
      meshList.push(alarmSPrite);
      scene.add(alarmSPrite.mesh);
      if (mapFn[item.name]) {
        mapFn[item.name](position, i);
      }
    });
  }
);

// 场景元素div
let sceneDiv = ref(null);
scene.add(camera);
scene.add(axesHelper);
createMesh();

const tick = () => {
  renderer.render(scene, camera);
  requestAnimationFrame(tick);
};

onMounted(() => {
  sceneDiv.value.appendChild(renderer.domElement);
  tick();
});
</script>
<style scoped lang="scss">
.scene {
  width: 100vw;
  height: 100vh;
  position: fixed;
  left: 0;
  top: 0;
  z-index: 100;
}
</style>
